<template>
  <el-row>
    <el-col :span="4">
      <label class="input-container">
        <el-input
          v-model="value"
          @keydown.tab.prevent="handleTab"
          placeholder="输入关键字，提示语"
        />
        <div class="suggestion-text">{{ suggestion }}</div>
      </label>
    </el-col>
  </el-row>
</template>

<script setup>
  const value = ref("");
  const suggestion = ref("");
  const suggestions = ["我是吴彦祖", "你是hello kite"];
  watch(value, () => {
    suggestion.value = "";
  });
  const handleTab = () => {
    const target = suggestions.find((str) => str.includes(value.value));

    if (!target) return;

    suggestion.value = target;
  };
</script>

<style lang="scss" scoped>
  .input-container {
    position: relative;
    display: block;
    .suggestion-text {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      padding: 6px 12px;
      font-size: 14px;
      box-sizing: border-box;
      opacity: 0.3;
    }
  }
</style>
